<template>
  <div class="pre_wiew_data">
    <el-button type="primary" size="mini" @click="showThatDiaog">{{$t('custom.bots.previewData')}}</el-button>
    <el-dialog :visible.sync="dialogVisible"
              :close-on-press-escape="false"
              :close-on-click-modal="false"
              append-to-body
              @open="openDialog"
              @close="closeDialog"
              :title="$t('custom.bots.previewData')"
              destroy-on-close
              width="82rem">
      <div class="pre_wiew_content" v-loading="loading">
        <ejs-grid :dataSource="dataList"
                    ref="datagrid"
                    v-if="dataList.length>0"
                    class="sortingenabled"
                    style="margin-top: 30px;"
                    :allowPaging='true'
                    :pageSettings='pageSettings'
                    :dataBound="dataBound"
        >
          </ejs-grid>
          <div class="pre_wiew_content_nodata" v-else>
            <img  :src="$ossLink+'/app/gadget/gadget_no_data.jpg'" alt="">
          </div>
      </div>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false"
                  size="mini">{{$t('attribute.cancel')}}</el-button>
        <!-- <el-button type="primary"
                  size="mini">Confirm</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>

import { generalConvertJsonToSQL } from '@/utils/common'
export default {
  data () {
    return {
      dialogVisible: false,
      loading: false,
      dataList: [],
      pageSettings: { pageSize: 10, pageSizes: [10, 50, 100, 200, 1000], pageCount: 1 },
      gridDefaultSetting: {
        allowResizing: true,
        allowFiltering: true,
        showColumnMenu: true,
        filterSettings: { type: 'Excel' },
        allowGrouping: false,
        allowPaging: false,
        toolbar: ['Search', 'ColumnChooser'],
        allowExcelExport: true,
        allowPdfExport: true,
        showColumnChooser: true,
        groupOptions: { columns: ['name'] },
        allowReordering: true,
        allowSorting: true,
        allowTextWrap: true,
        height: window.innerHeight - 230,
        selectOptions: { type: 'Multiple' },
        pageSettings: { pageSize: 100, pageSizes: [10, 50, 100, 200, 1000], pageCount: 1 },
        groupSettings: {
          allowReordering: false,
          columns: [],
          disablePageWiseAggregates: false,
          enableLazyLoading: false,
          showDropArea: true,
          showGroupedColumn: false,
          showToggleButton: false
        }
      },
      isGridInit: false
    }
  },
  created () {
  },

  methods: {
    showThatDiaog () {
      this.dialogVisible = true
    },
    getPreviewList () {
      this.dataList = []
      this.$emit('requstFilterSql')
      this.loading = true
      let params = ''
      if (this.$store.state.bot.type === 'dataset') {
        params = {
          'datasetId': this.$store.state.bot.id,
          'filter': generalConvertJsonToSQL(this.$store.state.bot.filterSql),
          'showSql': true,
          'showQuery': true
        }
      } else {
        params = {
          'gadgetId': this.$store.state.bot.id,
          'filter': generalConvertJsonToSQL(this.$store.state.bot.filterSql),
          'showSql': true,
          'showQuery': true
        }
      }

      this.$interface.reports.postInfoForGetDataApi(params).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          this.dataList = []
          // return this.$message.error(res.msg)
          return false
        }
        this.isGridInit = false
        this.dataList = res.data
        this.pageSettings.pageSize = res.page.size
        this.pageSettings.pageCount = res.page.current
      }).catch(() => {
        this.loading = false
      })
    },
    openDialog () {
      this.getPreviewList()
    },
    closeDialog () {
      this.dataList = []
    },
    dataBound (args) {
      if (!this.isGridInit) {
        this.isGridInit = true
        this.applyGadgetSetting()
      }
    },
    applyGadgetSetting () {
      let columnsList = []
      columnsList = Object.keys(this.dataList[0])
      this.$refs.datagrid.autoFitColumns(columnsList)
      this.grid.ej2Instances.setProperties(this.gridDefaultSetting)
    }
  }
}
</script>
<style lang="scss">
.pre_wiew_data{
  button{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .pre_wiew_content{
    min-height: 40px;
  }
}
.pre_wiew_content{
  min-height: 400px;
  text-align: center;
  img{
    width: 600px;
    height: 400px;
  }
  .e-grid .e-content {
      height: calc(calc(100vh - 555px)) !important;
    }
}
</style>
